<template>
  <div class="block">
    <div style="text-align: center;">
      <!-- 头像 users.headImg-->
      <el-avatar :size="200" :src="users.headUrl" ></el-avatar>
    </div>

    <!-- 信息列表 -->
    <el-descriptions class="margin-top" title="个人信息" :column="2" size="medium" border style="color: rgb(96,98,102);margin-top: 40px;">
      <template slot="extra">
        <!-- <el-popover
          placement="bottom"
          title="新昵称"
          width="300"
          trigger="click"> -->
          <!-- 回复按钮 -->
          <!-- <el-button type="text" slot="reference">修改昵称</el-button>
          <el-input v-model="input" placeholder="请输入内容"></el-input> -->
          <!-- <el-input v-model="newNickname" placeholder="输入昵称后回车修改" @keyup.enter.native="chgNickname"></el-input> -->
       <!-- </el-popover> -->
          <el-button type="text" @click="open" >修改昵称</el-button>
      </template>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          昵称
        </template>
        {{users.name}}
        <!-- {{users.usersName}} -->
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          手机号
        </template>
        {{users.phone}}
      </el-descriptions-item>
      <br>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline"></i>
          <!-- 默认地址里查询的 -->
          居住地
        </template>
        <!-- 成都市 - 蜗牛学苑 -->
        {{address.location}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          联系地址
        </template>
        <!-- 成都市高新区天府大道北段1480号孵化园5号楼 -->
        {{address.address}}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        //用户信息
        users:{

        },
        address:{

        },
        //昵称    应该在用户信息里
        newNickname: "tom",
        //Img:"https://tse4-mm.cn.bing.net/th/id/OIP-C.T9e6Q8NwjIkYkwigfypzuwHaKq?w=142&h=204&c=7&r=0&o=5&dpr=1.3&pid=1.7"
      }
    },
    methods:{
      updateDate(){
        this.$axios.get("http://localhost:8080/sysuser/"+this.user.username).then(res => {
          console.log(res.data.data)
          this.users = res.data.data
          //console.log(this.users.id)
          var id = this.users.id
          console.log(id)
          this.$axios.get("http://localhost:8080/sysuser/address/"+id).then(res => {
            console.log(res.data.data)
            this.address=res.data.data
            console.log(this.address)
          })
        })
      },
    open() {
            this.$prompt('请输入新昵称', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              inputPattern: /^\w+$/,
              inputErrorMessage: '不能为空',

            }).then(({ value }) => {
              this.$message({
                type: 'success',
                message: '你的昵称是: ' + value,

              });
              this.newNickname = value
              //修改昵称
              this.$axios.put("http://localhost:8080/sysuser",{
                "id":this.users.id,
                "name":this.newNickname
              }).then(res => {
                this.updateDate()
              })

              console.log(this.newNickname)
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '取消输入'
              });
            });
          }
          },
    //methods: {
      // chgNickname: function(){
      //   if(this.newNickname.length < 2 || this.newNickname.length > 10){
      //     this.$message.error("昵称长度在2-10个字符，请检查后重试")
      //     return
      //   }

    //     this.$axios.post(
    //       "acct/chgNickname",
    //       this.newNickname,
    //       { headers:{ 'Content-Type':'text/plain' } }
    //       ).then(res => {
    //       if(res.data.status == "SUCCESS"){
    //         // 将本页面保存的user和sessionStorage中的user对象替换为最新的
    //         this.user = res.data.data
    //         sessionStorage.setItem("user", JSON.stringify(this.user))

    //         this.newNickname = ""
    //         this.$message.success("昵称修改成功")
    //       }else{
    //         this.$message.error("修改失败")
    //       }
    //     })
    //   }
    // },

    mounted() {
      //从本地取出user对象
      this.user = JSON.parse(sessionStorage.getItem("user"))
      console.log(this.user)
      this.$axios.get("http://localhost:8080/sysuser/"+this.user.username).then(res => {
        console.log(res.data.data)
        this.users = res.data.data
        //console.log(this.users.id)
        var id = this.users.id
        console.log(id)
        this.$axios.get("http://localhost:8080/sysuser/address/"+id).then(res => {
          console.log(res.data.data)
          this.address=res.data.data
          console.log(this.address)
        })
      })


      // this.$axios.get("http://localhost:8080/users/"+1).then(res => {
      //   console.log(res.data.data)
      //   this.users = res.data.data

      // })



        // this.$axios.get("http://localhost:8080/login",{
        //               params: {
        //                   username:"tom",
        //                   password:"123"
        //               }
        //               }).then(res=>{
        //               window.localStorage.setItem("token", res.headers.token);
        //     console.log(res.headers.token)
        // })

        // this.$axios.get("http://localhost:8080/findAll"
        // , {
        // 				headers: {
        // 				//****
        // 					"token":window.localStorage.getItem("token")
        // 				}
        // 			},
        //       ).then(res => {
        // 				console.log(res.data.msg);
        // 			})




      //从本地取出user对象
      //this.user = JSON.parse(sessionStorage.getItem("user"))
    },
    // updated() {
    //   //从本地取出user对象
    //   this.user = JSON.parse(sessionStorage.getItem("user"))
    //   console.log(this.user)
    //   this.$axios.get("http://localhost:8080/sysuser/"+this.user.username).then(res => {
    //     console.log(res.data.data)
    //     this.users = res.data.data
    //     //console.log(this.users.id)
    //     var id = this.users.id
    //     console.log(id)
    //     this.$axios.get("http://localhost:8080/sysuser/address/"+id).then(res => {
    //       console.log(res.data.data)
    //       this.address=res.data.data
    //       console.log(this.address)
    //     })
    //   })
    // }
  }
</script>

<style scoped>

</style>
